﻿@page "/cards"

<h3>Card 卡片</h3>

<h4>将信息聚合在卡片容器中展示</h4>

<Block Title="Card 卡片组件" Introduction="Card简单示例">
    <Card style="width: 18rem;">
        <CardBody>
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </CardBody>
    </Card>
</Block>

<Block Title="Header 和 Footer" Introduction="通过添加 CardHeader 与 CardFooter 元素即可展示相关内容">
    <Card>
        <CardHeader>
            Featured
        </CardHeader>
        <CardBody>
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </CardBody>
        <CardFooter>
            2 days ago
        </CardFooter>
    </Card>
</Block>

<Block Title="内容居中" Introduction="通过设置，<code>IsCenter=true</code> 使内容居中">
    <Card IsCenter="true">
        <CardHeader>
            Featured
        </CardHeader>
        <CardBody>
            <h5 class="card-title">Special title treatment</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </CardBody>
        <CardFooter>
            2 days ago
        </CardFooter>
    </Card>
</Block>

<Block Title="带有边框颜色的卡片" Introduction="通过设置，<code>Color</code> 使border和Body具有相应的颜色">
    <div class="row flex">
        <Card Color="Color.Primary" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
            <CardHeader>
                Header
            </CardHeader>
            <CardBody>
                <h5 class="card-title">Primary card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </CardBody>
        </Card>
        <Card Color="Color.Secondary" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
            <CardHeader>
                Header
            </CardHeader>
            <CardBody>
                <h5 class="card-title">Success card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </CardBody>
        </Card>
        <Card Color="Color.Success" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
            <CardHeader>
                Header
            </CardHeader>
            <CardBody>
                <h5 class="card-title">Secondary card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </CardBody>
        </Card>
        <Card Color="Color.Warning" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
            <CardHeader>
                Header
            </CardHeader>
            <CardBody>
                <h5 class="card-title">Warning card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </CardBody>
        </Card>
        <Card Color="Color.Danger" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
            <CardHeader>
                Header
            </CardHeader>
            <CardBody>
                <h5 class="card-title">Danger card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </CardBody>
        </Card>
        <Card Color="Color.Info" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
            <CardHeader>
                Header
            </CardHeader>
            <CardBody>
                <h5 class="card-title">Info card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </CardBody>
        </Card>
        <Card Color="Color.Dark" Class="ml-3  mt-2" IsCenter="true" style="width: 18rem;">
            <CardHeader>
                Header
            </CardHeader>
            <CardBody>
                <h5 class="card-title">Dark card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </CardBody>
        </Card>
    </div>
</Block>

<AttributeTable Items="GetAttributes()" />


